<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这个懵懂，工作经历不会</title>
    <style type="text/css">
        #myTable{ width: 900px; margin: 0px auto; background-color: #008000;}
        #myTable td,#myTable th{ background-color: white;}
        #myDiv{width: 900px; margin: 0px auto; height: 30px; line-height: 30px; 
        text-align: center;}
    </style>
</head>
<body>
    <table cellspacing="1" id="myTable">
        <tr>
            <th width="200">
              <input type="checkbox" id="all"/>全选
            <input type="checkbox" id="sall"/>反选
                    </th>
            <th width="200">姓名</th>
            <th width="200">性别</th>
            <th width="200">专业</th>
            <th width="200">爱好</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" class="item"/></td>
            <td>刘备</td>
            <td>男</td>
            <td>软件开发</td>
            <td>抽烟</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" class="item"/></td>
            <td>关羽</td>
            <td>男</td>
            <td>国际贸易</td>
            <td>喝酒</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" class="item"/></td>
            <td>张飞</td>
            <td>男</td>
            <td>园林设计</td>
            <td>烫头发</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" class="item"/></td>
            <td>赵云</td>
            <td>男</td>
            <td>平面设计</td>
            <td>抽烟</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" class="item"/></td>
            <td>黄忠</td>
            <td>男</td>
            <td>影视制作</td>
            <td>玩游戏</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" class="item"/></td>
            <td>小乔</td>
            <td>女</td>
            <td>高级护理</td>
            <td>唱歌</td>
        </tr>
    </table>

    <script>
        //全选
        var all = document.querySelector('#all')
        var item = document.querySelectorAll('.item')
        all.onclick = function(){
            for(var i= 0;i<item.length;i++){
                item[i].checked = all.checked
            }
        }

        for(var i = 0;i<item.length;i++){
            item[i].onclick = function(){
                var count = 0

                for(var j = 0;j<item.length;j++){
                    if(item[j].checked){
                        count++
                    }
                }
                if(count === item.length){
            all.checked = true
        }else{
            all.checked = false
        }
            }
        }
//反选
        document.getElementById("sall").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = !cbs[i].checked;
                }
            }
    </script>
</body>
</html>